<template>
    <div class="param-main">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" >
            <div class="infoContainer">
              <div>
                <img src="@/assets/images/avatar.png" alt="">
                <span>仗剑走天涯</span>
              </div>
              <div class="infoContainer_integral">
                <div>积分:<span class="infoContainer_integral_detail">200</span></div>
                <div>手机号:<span class="infoContainer_integral_detail">18200235502</span></div>
                <div>用户名:<span class="infoContainer_integral_detail">洲洲洲</span></div>
              </div>
              <div class="infoContainer_btn">
                <el-button type="primary">充值</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" >
            <div class="infoContainer">
              <el-table
                height='200'
                :data="tableData"
                style="width: 100%;">
                <el-table-column
                  prop="title"
                  label="变更记录"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="val"
                  label=""
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="" width="80px">
                  <template slot-scope="scope">
                      <span style="color: #66B1FF;cursor: pointer;" @click="bindTurn(scope.row.title)">更多记录</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <div class="infoDetail">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-descriptions class="margin-top" title="详细信息" :column="3" :size="size" border>
                  <template slot="extra">
                    <el-button type="primary" size="small">编辑</el-button>
                  </template>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      用户名
                    </template>
                    kooriookami
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      登录用户名
                    </template>
                    kooriookami
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-mobile-phone"></i>
                      手机号
                    </template>
                    18100000000
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-suitcase"></i>
                      组织名称
                    </template>
                    合一优品
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-place"></i>
                      所属区域
                    </template>
                    <el-tag size="small">四川</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-tickets"></i>
                      备注
                    </template>
                    无
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-printer"></i>
                      传真
                    </template>
                    无
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-files"></i>
                      简介
                    </template>
                    无
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-price-tag"></i>
                      职位
                    </template>
                    无
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-message"></i>
                      电子邮箱
                    </template>
                    无
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-location-information"></i>
                      地址
                    </template>
                    无
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
        
      <div>

      </div>
    </div>
  </template>
  <script>
  export default {
    data () {
      return {
        tableData: [
          { title: '充值记录', val: 200, time: '2024-03-25' },
          { title: '积分变动记录', val: 200, time: '2024-03-25' },
          { title: '历史纠错记录', val: 200, time: '2024-03-25' },
        ]
      }
    },
    mounted () {
    },
    methods: {
      bindTurn(title){
        switch(title){
          case '充值记录':
            this.$router.push({ path: "/personal/rechargeRecord" });
            break
          case '积分变动记录':
            this.$router.push({ path: "/personal/rechargeRecord" });
            break
          case '历史纠错记录':
            this.$router.push({ path: "/personal/rechargeRecord" });
            break
          default: break;
        }
      }
    }
  }
  </script>
<style lang="less" scoped>
.infoDetail{
  padding: 20px;
  box-sizing: border-box;
  &_con{
    text-align: center;
    width: 50%;
    display: inline-block;
    padding: 10px 0;
  }
  .grey{
    background: #FAFAFA;
  }
  /deep/ .el-card__body, .el-main{
    padding: 0;
  }
}
.infoContainer{
  height: 200px;
  display: flex;
  > div{
    width: calc(100% / 3);
    &:first-child{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      > span{
        margin-top: 20px;
      }
    }
  }
  &_integral{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &_detail{
      margin-left: 20px;
    }
  }
  &_btn{
    text-align: right;
  }
  /deep/ .el-table td.el-table__cell div{
    padding: 10px 0;
  }
}

</style>
  